<template>
	<view >
		<u-form :model="findPassword" :rules="rules" ref="uForm" :errorType="errorType">
			<view  style="padding: 20rpx;">
				<u-form-item :label-position="labelPosition" label="手机号"  prop="phone">
					<u-input :border="border" placeholder="请输入手机号" v-model="findPassword.phone" type="text"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="验证码" label-width="150"  prop="code">
					<u-input :border="border" placeholder="请输入验证码" v-model="findPassword.code" type="text"></u-input>
					<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="密码" prop="password">
					<u-input :border="border" placeholder="请设置密码" v-model="findPassword.password" type="password"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="确认密码" label-width="150" prop="password">
					<u-input :border="border" type="password" v-model="findPassword.rePassword" placeholder="请确认密码"></u-input>
				</u-form-item>
			</view>
		</u-form>
		<view style="padding: 20rpx;">
			<!--<view class="l-body-fixed">-->
			<view style=" width: 100%; display: flex; align-items: center; justify-content: center;">
				<u-button type="primary" size="medium"@click="find()">找回</u-button>
			</view>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				errorType: ['message'],
				border:false,
				labelPosition: 'top',
				findPassword:{
					phone:"",
					code:"",
					password:"",
					rePassword:"",
				},
				codeTips: '',
				rules: {
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							required: true,
							message: '请输入验证码',
							trigger: ['change','blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change','blur'],
						}
					],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['change','blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change','blur'],
						}
					],
					rePassword: [
						{
							required: true,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					],
				},
			}
		},
		methods: {
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			find(){
				console.debug('找回密码');
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.debug('验证通过');
						uni.showToast({
							title:'密码重置成功'
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:'../user_login/user_login'
							})
						},2000);
					} else {
						console.debug('验证失败');
					}
				});
			}
		}
	}
</script>

<style>
page{
	background-color: #FFFFFF;
}
.l-body-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 98rpx;
		display: flex;
		width: 100%;
		padding: 0 var(--pad-lr);
		align-items: center;
		white-space: nowrap;
		background-color: #f7f7fa;
		justify-content: space-between;
	}
	.bookinfo{
		padding: 20rpx;
		
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		font: bold 36rpx normal;
	}
</style>
